<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	template="web/templates/ui.xhtml">

	<ui:define name="title">
		<h:outputText value="Responsables" />
	</ui:define>
	<ui:define name="sidebar">
		<div class="widget">
			<div class="title">
				<div class="inner">
					<h3>
						<h:outputText value="Menú" />
					</h3>
				</div>
			</div>
			
			<!-- MENU PERFIL ADMINISTADOR -->
			<ui:include src="menu.xhtml" />
			
		</div>
	</ui:define>
	<ui:define name="content">
		<div class="page-header">
			<h3>
				<h:outputText value="Tipo de Areas de Interes" />
			</h3>
		</div>
		<div class="subTitle">
			<ol class="breadcrumb">
				<li><a href="index.jsf"><span class="glyphicon glyphicon-home"></span></a></li>
				<li class="active">Búsqueda </li>
			</ol>
		</div>
		
		<div class="gridContent">
			<div class="inner">
				<h:form id="form">
					<p:panel>

					<div class="row">

						<div class="col-sm-12 form-group">

							<p:outputLabel id="lblTipoAreaInteres" for="txtTipoAreaInteres" value="Tipo de Area de Interes" />
							
								<p:inputText id="txtTipoAreaInteres" />
							

						</div>
					</div>
					<div class="btnAction row no-gutter">
							<div class="inner text-right">								
								<p:commandButton update=":form" styleClass="btn btn-success" value="Buscar" actionListener="#{carreraProfesionalService.buscarCarreraprofesional}"></p:commandButton>
							</div>
					</div>

			<p:growl id="msgs" showDetail="true" />

<style>
.ui_celda_frm{font-weight: bold; color: #232323; text-align:left; }
</style>

    <p:dialog position="top" header="Detalle Responsable" widgetVar="carDialog" modal="true" 
    	showEffect="fade" hideEffect="fade" resizable="false" 
    	 width="700px" height="400px" >
        <p:outputPanel id="carDetail" style="text-align:center;">
        	        
            <p:panelGrid columns="4" rendered="#{not empty carreraProfesionalService.selectedCarreraprofesional}" columnClasses="">
                					
                <h:outputText styleClass="ui_celda_frm" value="ID:" />
                <h:outputText value="#{carreraProfesionalService.selectedCarreraprofesional.codigoCatalogo}" />
				<h:outputText styleClass="ui_celda_frm" value="Tipo de Area de Interes:" />
                <h:outputText value="#{carreraProfesionalService.selectedCarreraprofesional.nombreCatalogo}" />
                
            </p:panelGrid>
        </p:outputPanel>
    </p:dialog>

<!--  Grilla resultante de la búsqueda -->

	<p:dataTable id="singleDT" var="responsable" value="#{carreraProfesionalService.listaCarreraprofesional}"
          widgetVar="responsableTable"
		  emptyMessage="No se han encontrado registros"
		  rows="5" paginator="true"
			paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
			selectionMode="single" selection="#{carreraProfesionalService.selectedCarreraprofesional}" 
			rowKey="#{carreraprofesional.codigoCatalogo}"
	>

							<p:column headerText="ID"
								sortBy="#{carreraprofesional.codigoCatalogo}">
								<h:outputText value="#{responsable.codigoCatalogo}" />
							</p:column>

							<p:column headerText="Tipo de Area de Interes">
								<h:outputText value="#{carreraprofesional.nombreCatalogo}" />
							</p:column>

							<f:facet name="footer">
								
								
											<div style="float: left; width: 150px; border: 0px solid #222;">
												<p:commandButton styleClass="btn btn-view" process="singleDT" update=":form:carDetail" 
								            	value="Ver Registro" oncomplete="PF('carDialog').show()" />
											</div>
					
											<div style="float: left; width: 150px; border: 0px solid #222; background-color: transparent">
												<p:commandButton styleClass="btn btn-kill" process="singleDT"
								            	value="Eliminar" update=":form:msgs" actionListener="#{carreraProfesionalService.eliminarResponsable}">
								            	<p:confirm header="Confirmation" message="¿Está seguro de eliminar el registro seleccionado?" icon="ui-icon-alert" />	
									           </p:commandButton>
									            	
									            <p:confirmDialog  global="true" showEffect="fade" hideEffect="explode">
											        <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
											        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
											    </p:confirmDialog>
											</div>
					
											<div style="float: right; width: 150px; border: 0px solid #222">
												<p:link styleClass="btn btn-success" value="Crear Nuevo" href="admin_tipo_area_interes_frm.jsf"></p:link>
											</div>
							            <div style="clear:both;"></div>
					        </f:facet>
							
						</p:dataTable>

<!-- Fin  Grilla resultante de la búsqueda -->

<div style="display: none;">

						<div style="float: left; width: 100%; border: 0px solid #222; background-color: transparent">
							<div class="btnAction row no-gutter" style="border: 0px solid #222; width: 100%; ">
								<div class="inner text-center" style="border: 0px solid #222;">
								
						<div style="float: left; width: 150px; border: 0px solid #222;">
							<p:link styleClass="btn btn-view" value="Ver Registro"></p:link>
						</div>

						<div style="float: left; width: 150px; border: 0px solid #222; background-color: transparent">
							<p:link styleClass="btn btn-kill" value="Eliminar"></p:link>
						</div>

						<div style="float: right; width: 150px; border: 0px solid #222">
							<p:link styleClass="btn btn-success" value="Crear Nuevo" href="admin_tipo_area_interes_frm.jsf"></p:link>
						</div>
									
									
								</div>
							</div>
						</div>


						<hr></hr>
				Esta tabla se logra con las opciones de Primefaces:

				<ul>

							<li>Filtro: <a
								href="http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml"
								target="_blank">http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml</a></li>
							<li>Paginación: <a
								href="http://www.primefaces.org/showcase/ui/data/datatable/paginator.xhtml"
								target="_blank">http://www.primefaces.org/showcase/ui/data/datatable/paginator.xhtml</a></li>
						</ul>
</div>
					
					
					</p:panel>
				</h:form>
			</div>
		</div>
	</ui:define>
	<ui:define name="script">
	</ui:define>
</ui:composition>